import React, {Component} from 'react'
class ComSon extends React.Component {
  constructor() {
    super();
    this.state = {
      message: '这是子组件的信息'
    }
  }
  // 4. props修改导致页面变化---外部因素
  componentWillReceiveProps(props) {
    console.log('新的props:', props);
  }
  // 更新期
  shouldComponentUpdate(nextProps, nextState) {
    // 数据变化后，需要判断是否更新dom，要返回一个布尔值
    console.log('子组件：',nextProps);
    console.log('子组件：',nextState);
    return true
  }
  // 销毁期
  componentWillUnmount() {
    // 这里要清除自定义的定时器和事件监听
    console.log('========  componentWillUnmount  ========');
  }
  render(props) {
    console.log('======== 渲染页面 ========');
    return (<div>
      <p>我是子组件</p>
      <p>父组件传过来的值：{this.props.info}</p>
      <p>父组件传过来的值：{this.props.age}</p>
      <p>严格的单向数据流，父组件中数据的变化会同步到子组件；父组件传过来的值是只读属性，不能修改</p>
      <p>父组件传过来的值：{this.props.name}</p>
      <p>子传父的思路：父传子一个函数，子组件调用这个函数时，携带的参数就是要传递的数据</p>
      <button onClick={() => 
      this.props.transferMsg(this.state.message)}>子传父</button>
    </div>)
  }
}
export default ComSon